<template>
	<view class="animated fadeIn faster bg-fff" style="min-height: 100vh">
		<view class="position-fixed w-100 z-index-100 pb-1" :style="{'paddingTop':$store.state.statusBarHeight+'px','backgroundColor':bgcolor}">
			<view class="px-3" :style="{'height': $store.state.titleBarHeight + 'px'}">
				<view class="d-flex d-flex-between d-flex-middle">
					<text class="iconfont icon-24gf-bubbleDots2 font36"></text>
					<view class="d-flex-item d-flex d-flex-center d-flex-middle" :style="{'height': $store.state.titleBarHeight + 'px'}">
						<text class="font36 font-bold mr-1">聊天</text>
						<text class="iconfont icon-dian1 colorsuccess"></text>
						<text class="font24 color71">在线</text>
					</view>
					<text></text>
				</view>
			</view>
		</view>
		<view :style="{paddingTop:$store.state.statusBarHeight+'px',height: $store.state.titleBarHeight + 'px'}"></view>
		<view class="px-3 mt-3 mb-4">
			<view class="d-flex d-flex-middle px-2 blueSrch">
				<text class="iconfont icon-sousuo font24 mr-1"></text>
				<text class="font22">永劫无间端游</text>
			</view>
		</view>
		<view class="px-3">
			<view class="px-2 bg-f8 py-3 rounded15">
				<view class="d-flex d-flex-middle mb-3">
					<image class="rounded" src="https://168809.oss-cn-hangzhou.aliyuncs.com/community/temp/chat05.png" style="width: 90rpx;height: 90rpx;"></image>
					<view class="d-flex d-flex-column ml-2">
						<view class="colornan font-600 mb">活动中心</view>
						<view class="font24 color666">打王者每天赚50元</view>
					</view>
				</view>
				<view class="d-flex d-flex-middle mb-3" @click="gotoCardiacSigin">
					<image class="rounded" src="https://168809.oss-cn-hangzhou.aliyuncs.com/community/temp/chat04.png" style="width: 90rpx;height: 90rpx;"></image>
					<view class="d-flex d-flex-column ml-2">
						<view class="font-600 mb">搭子心动信号</view>
						<view class="font24 color666">看看和谁点亮了印记</view>
					</view>
				</view>
				<view class="d-flex d-flex-middle">
					<image class="rounded" src="https://168809.oss-cn-hangzhou.aliyuncs.com/community/temp/chat09.png" style="width: 90rpx;height: 90rpx;"></image>
					<view class="d-flex d-flex-column ml-2">
						<view class="colornan font-600 mb">小搭助手</view>
						<view class="font24 color666">来丰收一波好礼！0.1元立享初秋礼包</view>
					</view>
				</view>
			</view>
			
			<view class="my-6 font-bold color000">他们正在找玩伴</view>
			
			<view class="d-flex bg-f8 p-2 mb-3 rounded15 d-flex-middle d-flex-between">
				<view class="d-flex d-flex-middle">
					<image class="rounded mr-1" src="https://168809.oss-cn-hangzhou.aliyuncs.com/community/temp/chat01.png" style="width: 130rpx;height: 130rpx;"  @click="openHomePage"></image>
					<view class="d-flex d-flex-column">
						<view class="mb font-500">7737.摇光</view>
						<text class="font22 color71">我换了新头像，好看吗</text>
					</view>
				</view>
				<text class="font22 color71 pr-1">09月18号</text>
			</view>
			
			<view class="d-flex bg-f8 p-2 mb-3 rounded15 d-flex-middle d-flex-between">
				<view class="d-flex d-flex-middle">
					<image class="rounded mr-1" src="https://168809.oss-cn-hangzhou.aliyuncs.com/community/temp/chat02.png" style="width: 130rpx;height: 130rpx;"></image>
					<view class="d-flex d-flex-column">
						<view class="mb font-500">1818 意</view>
						<text class="font22 color71">我换了新头像，好看吗</text>
					</view>
				</view>
				<text class="font22 color71 pr-1">09月18号</text>
			</view>
			<view class="d-flex bg-f8 p-2 rounded15 d-flex-middle d-flex-between">
				<view class="d-flex d-flex-middle">
					<image class="rounded mr-1" src="https://168809.oss-cn-hangzhou.aliyuncs.com/community/temp/chat03.png" style="width: 130rpx;height: 130rpx;"></image>
					<view class="d-flex d-flex-column">
						<view class="mb font-500">极致 - 无垢</view>
						<text class="font22 color71">我换了新头像，好看吗</text>
					</view>
				</view>
				<text class="font22 color71 pr-1">09月18号</text>
			</view>
		</view>
	</view>
</template>

<script>
	import store from '@/store/index.js';
	export default {
		data() {
			return {
				bgcolor:'transparent',
			}
		},
		onPageScroll(e) {
			let scrollTop = e.scrollTop
			if (scrollTop > 10) {
				this.bgcolor = '#ffffff'
			}else{
				this.bgcolor = 'transparent'
			}
		},
		methods: {
			openHomePage() {
				uni.navigateTo({
					url:'/pagesMain/HomePage/HomePage'
				})
			},
			gotoCardiacSigin() {
				uni.navigateTo({
					url:'/pagesMain/mes-CardiacSignal/mes-CardiacSignal'
				})
			}
		}
	}
</script>

<style scoped>
.blueSrch{
	background: #CFF0FB;
	border: 1px solid #46C4FF;
	color: #46C4FF;
	height: 60rpx;
	border-radius: 30rpx;
}
</style>
